<template>
    <blockquote :class="cns"><slot></slot></blockquote>
</template>
<script lang="ts">
import { defineComponent,computed } from 'vue'

export default defineComponent({
    props:{
        type:{
            type:String,
            default:"plain"
        }
    },
    setup(props) {
        const cns = computed(()=>{
            return ["ph-blockquote","ph-blockquote-"+props.type]
        })
        return {cns}
    }
})
</script>

<style lang="scss">
.ph-blockquote{
	flex: 0 0 auto;
    font-size: var(--phx);
	margin: var(--ph-15) 0;
    padding: var(--ph-15);
    line-height: 1.6;
    border-left: var(--ph-5) solid var(--ph-c);
    background-color: var(--ph-light-l1);
    border-radius: 3px 0 0 3px;
    color: var(--ph-c-d1);
    width: 100%;
    a,button{
        border:none;
        outline:none;
        background-color: transparent!important;
        color:inherit!important;
        font-weight: bold;
        cursor: pointer;
    }
    &-primary{
        border-left-color:var(--ph-primary);
        color:var(--ph-primary-color);
    }
    &-success{
        border-left-color:var(--ph-success);
        color:var(--ph-success-color);
    }
    &-warning{
        border-left-color:var(--ph-warning);
        color:var(--ph-warning-color);
    }
    &-danger{
        border-left-color:var(--ph-danger);
        color:var(--ph-danger-color);
    }
}
</style>